<images-slider class="form-inline">
    <style>
        input[type='file'] {
            display: none;
        }
    </style>
    <div style="width: 50px;  text-align: center; padding: 10px;">
        <label class="btn-bs-file">
            <i class="icon-picture" style="font-size: 1.5em"></i>
            <input id="browseImages" type="file" class="filebutton" accept="image/*" onchange={ readImageFiles }
                multiple />
        </label>

        <label class="btn-bs-file">
            <i class="icon-folder-open-empty" style="font-size: 1.5em"></i>
            <input type="file" id="image_folder" webkitdirectory mozdirectory msdirectory odirectory directory
                onchange={ readImageFiles }>
        </label>
    </div>
    <div id="leftpaddle" class="align-middle" style="height: 100%;">
        <span style="width: 50px; height: 90px;">
            <i class="icon-left-open" style="font-size: 1.5em"></i>
        </span>
    </div>
    <div class="photolist-wrapper " style="width: calc(100% - 160px); height: 90px;">
        <div id="photolist" class="photolist">
            <!-- <span each={ thumbnails } class="d-inline-block">
                            <span class="delete" onclick={ deleteThumbnail }></span> -->
            <img id="thumbnail_{index}" each={ thumbnail,index in thumbnails } src={ thumbnail.src } label={
                thumbnail.name } title={ thumbnail.name } width={thumbnailWidth} onclick={ loadIntoWorkArea}>
            <!-- </span> -->
        </div>
    </div>
    <div id="rightpaddle" class="align-middle" style="height: 100%;">
        <span style="width: 50px; height: 90px;">
            <i class="icon-right-open" style="font-size: 1.5em"></i>
        </span>
    </div>


    <script>
        var tag = this;
        tag.readImageFiles = readImageFiles;
        tag.readImageFile = readImageFile;
        tag.slideleft = slideleft;
        tag.slideright = slideright;
        tag.deleteThumbnail = deleteThumbnail;
        tag.loadIntoWorkArea = loadIntoWorkArea;

        this.on('mount', function () {

            $("#leftpaddle").click(function (e) {
                tag.slideleft(e);
            })

            $("#rightpaddle").click(function (e) {
                tag.slideright(e);
            })

            //Map keyboard keys
            document.addEventListener('keydown', e => {

                if (e.key == 'ArrowLeft' && e.altKey) {
                    if (tag.currentIndex > 0) $("#thumbnail_" + --tag.currentIndex).click();
                    e.preventDefault();
                    e.stopPropagation();
                }
                if (e.key == 'ArrowRight' && e.altKey) {
                    if (tag.currentIndex < tag.thumbnails.length - 1) $("#thumbnail_" + ++tag.currentIndex).click();
                    e.preventDefault();
                    e.stopPropagation();
                }

                if (e.key == 'o' && e.altKey && e.ctrlKey) {
                    document.getElementById('image_folder').click();
                    e.preventDefault();
                    e.stopPropagation();
                }
                if (e.key == 'o' && e.altKey) {
                    document.getElementById('browseImages').click();
                    e.preventDefault();
                    e.stopPropagation();
                }
            })
        });

        this.on('updated', () => {
            //$("#thumbnail_0").click(); as this triggers before images are uploaded it cuase issue. Load it with an interval
        })

        function readImageFiles(e) {
            var input = e.srcElement || e.target;
            if (input.files && input.files[0]) {
                for (i = 0; i < input.files.length; i++) {
                    this.readImageFile(input.files[i]);
                }
            }
        }

        tag.thumbnails = [];
        tag.currentIndex = 0;
        this.thumbnailWidth = this.opts.thumbnail_width || "80px";

        function readImageFile(f) {
            if (f.type.startsWith("image")) {
                var reader = new FileReader();
                reader.onload = e => {
                    var imgData = {
                        name: f.name,
                        src: e.target.result
                    };
                    updateDimentions(e.target.result, imgData);
                    tag.thumbnails.push(imgData);

                    this.trigger("uploadimages");
                }
                reader.onloadend = e => {
                    this.update();
                }
                reader.readAsDataURL(f);
            }
        }

        function updateDimentions(imgFileSrc, imageDataObject) {
            var img = new Image();
            img.onload = function () {
                imageDataObject.size = {
                    width: this.width,
                    height: this.height,
                    scaledWidth: this.width,
                    scaledHeight: this.height,
                    imageScale: 1
                }
                addImgToStore(imageDataObject.name, imageDataObject.size);
            }
            img.src = imgFileSrc;
        }

        this.sliding = false;
        this.sliderMove = "80px";
        function slideleft(e) {
            var photolist = $("#photolist");
            if (this.sliding === false) {
                this.sliding = true;
                photolist.css({ left: "-" + this.sliderMove })
                    .prepend(photolist.children('img:last-child'))
                    .animate({ left: 0 }, 200, 'linear', () => {
                        this.sliding = false;
                    });
            }
        };
        function slideright(e) {
            var photolist = $("#photolist");
            if (this.sliding === false) {
                this.sliding = true;
                photolist.animate({ left: "-" + this.sliderMove }, 200, 'linear', () => {
                    photolist.css({ left: 0 })
                        .append(photolist.children('img:first-child'));
                    this.sliding = false;
                });
            }
        };

        function deleteThumbnail(e) {
            var thumbnail = $(e.target.nextElementSibling);
            for (var thumbnail_i in tag.thumbnails) {
                if (tag.thumbnails[thumbnail_i].name === $(thumbnail[0]).attr("title")) {
                    tag.thumbnails.splice(thumbnail_i, 1);
                    break;
                }
            }
            this.update();
        }

        function loadIntoWorkArea(e) {
            imgSelected = tag.thumbnails[e.item.index];

            let preZoom = localStorage.getItem("zoom");

            if (preZoom !== null && imgSelected.isZoomed !== 1) {
                imgSelected.size.imageScale = 1 * preZoom;

                imgSelected.size.scaledWidth = Math.floor(imgSelected.size.width * imgSelected.size.imageScale);
                imgSelected.size.scaledHeight = Math.floor(imgSelected.size.height * imgSelected.size.imageScale);
            }

            $("#zoom-scale").val(Math.round(imgSelected.size.imageScale * 100) + '%');
            riot.mount("workarea", { img: imgSelected });
        }
    </script>
</images-slider>